import React, { useEffect, useState, useRef, memo } from 'react'
import BetterScroll from 'components/betterScroll'
import { useHistory } from 'react-router-dom'
import { mixRoute } from '@/utils'

// const alphabet = [
//   'A',
//   'B',
//   'C',
//   'D',
//   'E',
//   'F',
//   'G',
//   'H',
//   'I',
//   'J',
//   'K',
//   'L',
//   'M',
//   'N',
//   'O',
//   'P',
//   'Q',
//   'R',
//   'S',
//   'T',
//   'U',
//   'V',
//   'W',
//   'X',
//   'Y',
//   'Z'

// ]

export const FirstCategory = memo((props) => {


  console.log('first 执行------------')


  const first_ref = useRef()
  const [firstIndex, setFirstIndex] = useState(0)
  const { firstCategory } = props
  useEffect(() => {
    try {
      first_ref.current.BScroll.refresh()

    } catch (error) {
    }
  }, [firstCategory])


  return (
    <div className="left">
      {firstCategory.length > 0 && <BetterScroll ref={first_ref} style={{ height: 'calc(100vh - 20px)' }} >
        {
          firstCategory.map((item, key) => {
            return (
              <div style={firstIndex === key ? { backgroundColor: '#F5F5F5' } : {}} className="item" key={key + item.code}
                onClick={() => { handelClick(key, item.code) }}
              >
                <p className="text" style={firstIndex === key ? {
                  color: '#ff762e',
                  borderRight: ' solid .07rem #ff762e', borderLeft: ' solid .07rem #ff762e'
                } : {}}  >
                  {item.name}
                </p>
              </div>
            )
          })
        }
      </BetterScroll>}
    </div>
  )

  function handelClick(key, code) {
    setFirstIndex(key)
    props.getData(code)
  }
})

export const SecondCategory = memo((props) => {

  const history = useHistory()
  const second_ref = useRef()
  const { secondCategory } = props

  useEffect(() => {
    try {
      second_ref.current.BScroll.refresh()
    } catch (error) {

    }
  }, [props.secondCategory])

  return (
    <div className="right">
      <BetterScroll ref={second_ref} style={{ height: 'calc(100vh - 20px)' }} >
        {/* {
          alphabet.map((val, key) => {
            return (
              <div className="box" key={val + key}>
                <p className="alphabet">
                  {val}
                </p>
                <div className="content flex-row">
                  {
                    secondCategory[val] &&
                    secondCategory[val].map((item, key) => {
                      return (
                        <div className="item" key={key + item.code}>
                          <p className="text" onClick={e => {
                            mixRoute(history, `/category/goodslist/${item.code}`)
                          }}>
                            {item.name}
                          </p>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
            )
          })
        } */}

        {
          secondCategory.map((item, key) => (
            <div className="box" key={key + item.code}>
              {/* <p className="alphabet">
                {item?.shouzimu}
              </p> */}
              <div className="content flex-row">
                <div className="item" >
                  <p className="text" onClick={() => {
                    mixRoute(history, `/category/goodslist/${item.code}`)
                  }}>
                    {item.name}
                  </p>
                </div>
              </div>
            </div>
          ))
        }

      </BetterScroll>

    </div>
  )
})

